<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>扇形统计图</title>
</head>
<script>
window.onload=function(){
	var huabu=document.getElementById('canvas');
	var hua=huabu.getContext('2d');
	hua.fillStyle='#eee';
	hua.fillRect(0,0,200,200)
	var obj=[0.18,0.22,0.23,0.22,0.15];
	main(obj)
	function main(obj){
		var color=['red','yellow','blue','black','green','white']
		var num=obj.length;
		for(var i=0;i<num;i++){
			var sum=0;
			for(var j=0;j<i;j++){
				sum+=obj[j];
				}
			new fn(sum,sum+obj[i],color[i])
			}
	
		function fn(start,end,color){
			this.start=start;
			this.end=end;
			this.color=color;
			this.num=0;
			var _this=this;
			this.timer=setInterval(function(){
				_this.num+=0.01;
				hua.beginPath();
				hua.fillStyle=color;
				hua.moveTo(huabu.width/2,huabu.height/2);
				hua.arc(huabu.width/2,huabu.height/2,huabu.width/2,2*_this.start*Math.PI,2*(_this.start+_this.num)*Math.PI,false)
				hua.fill();
				hua.closePath();
				if(_this.num+_this.start>=_this.end){
					clearInterval(_this.timer)
					}
				
				},100)
			
			
			}	
			
			
			
			
		}
	
	
	
	}
</script>
<body>
	<canvas id="canvas" width="200" height="200"></canvas>
</body>
</html>
